<template>
  <div>
    <el-radio-group v-model="currentTab" size="large" fill="#6cf">
      <el-radio-button label="用户操作" value="user" />
      <el-radio-button label="角色操作" value="role" />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
    <keep-alive
      :include="['LogUser', 'LogRole']"
      :exclude="['LogLos Angeles', 'LogChicago']"
      max="10"
    >
      <component :is="currentTab === 'user' ? LogUser : LogRole" />
    </keep-alive>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, KeepAlive } from "vue";

import LogUser from "./LogUser.vue";
import LogRole from "./LogRole.vue";

onMounted(() => {
  console.log("logs-mounted");

  const set = new Set(["LogUser", "LogRole"]);
  console.log("set", set);
  set.add("LogLos Angeles");
  set.add("LogChicago");
  console.log("set", set);

  console.log(set.values().next().value);
});

const currentTab = ref("user");
</script>
